<template>
  <div class="gray">
    <div class="white">
      <div class="vip_k">
        <div class="top">
          <p class="name">昵称&nbsp;:&nbsp;{{userName}}</p>
          <div class="white_vip">
            <div style="display:flex">
              <span>现有积分&nbsp;:&nbsp;</span>
              <span style="display:flex">
                <span class="add">{{jifen}}</span>
              </span>
            </div>
          </div>
          <div class="qiandao" @click="qiandao()">
            <p style="cursor:pointer">签到领积分</p>
          </div>
        </div>
        <div class="buju">
          <div>
            <ul class="nav">
              <li
                v-for="(item,index) of nav"
                :key="index"
                :class="{choose:index==i}"
                @click="change(index)"
              >
                <span>{{item.name}}</span>
              </li>
            </ul>
          </div>
          <div>
            <div v-show="i==0">
              <div class="jibenziliao">
                <div class="one">
                  <p>
                    <label for="性别">姓名</label>

                    <input v-model="userName" />
                  </p>
                  <p>
                    <label for="性别">身份证</label>
                    <input type="text" v-model="sfz" />
                  </p>
                </div>
                <div class="two">
                  <p>
                    <label for="性别">邮箱</label>
                    <input type="text" v-model="mail" />
                  </p>
                </div>
              </div>
              <div class="jibenziliao_xiugai" @click="save">
                <p>保存</p>
              </div>
            </div>
            <div v-show="i==1" class="xiugai">
              <ul>
                <li>
                  <label for>输入原密码</label>
                  <input type="text" v-model="upwd" />
                </li>
                <li>
                  <label for>输入新密码</label>
                  <input type="text" v-model="newUpwd" />
                </li>
                <li>
                  <label for>确认新密码</label>
                  <input type="text" v-model="newUpwd2" />
                </li>
              </ul>
              <div class="xiugai_button">
                <p @click="mima()">确认修改</p>
              </div>
            </div>
            <!-- 个人预约 -->
            <div v-show="i==2" id="gerenyuyue">
              <div v-show="show2">
                <el-table :data="gerentable">
                  <el-table-column prop="number" label="预约编号" width="180"></el-table-column>

                  <el-table-column prop="date" label="参观时间" width="160"></el-table-column>
                  <el-table-column prop="startTime" label="开始时间" width="180"></el-table-column>
                  <el-table-column prop="endTime" label="结束时间" width="160"></el-table-column>
                  <el-table-column prop="status" label="预约状态" width="160"></el-table-column>
                  <el-table-column class="check_more" label="操作" width="160">
                    <template slot-scope="scope">
                      <span style="color:#869df8" @click="viewdetails2(scope.row)">查看详情</span>
                    </template>
                  </el-table-column>
                </el-table>
                <div v-if="gerentable.length">
                  <div class="no_more" v-show="gr_more">
                    <p @click="lan2(page2)" v-if="gerentable.length">无更多数据</p>
                  </div>
                </div>
              </div>
              <div v-show="!show2">
                <div class="zixundetail">
                  <p class="zixundetail_top">
                    <span>详情</span>
                    <span>
                      状态:
                      <span>{{gr_status}}</span>
                    </span>
                  </p>
                  <div>
                    <ul class="table_title">
                      <li>
                        <span>预约编号</span>
                        <span>姓名</span>
                        <span>证件类型</span>
                        <span>证件编号</span>
                        <span>预约时间</span>
                        <span>参观时间</span>
                        <span>门票名称</span>
                      </li>
                    </ul>
                    <ul class="table_content">
                      <li>
                        <p>{{gr_number}}</p>
                        <p>{{userName}}</p>
                        <p>身份证</p>
                        <p>{{sfz}}</p>
                        <p></p>
                        <p>{{gr_date}}</p>
                        <p>{{hd_name}}</p>
                      </li>
                    </ul>
                  </div>
                </div>
                <div class="btn">
                  <p class="back" @click="gr_fanhui()">返回</p>
                  <p class="return" v-if="gr_status=='成功'" @click="gr_back()">撤销</p>
                  <p class="already_return" v-if="gr_status=='过期'">已过期</p>
                  <p class="already_return" v-if="gr_status=='撤销'">已撤销</p>
                </div>
              </div>
            </div>
            <!-- 团队预约 -->
            <div v-show="i==3" id="tuanduiyuyue">
              <div v-show="show3">
                <el-table :data="tuanduitable">
                  <el-table-column prop="number" label="预约编号" width="180"></el-table-column>

                  <el-table-column prop="date" label="参观时间" width="160"></el-table-column>
                  <el-table-column prop="startTime" label="开始时间" width="180"></el-table-column>
                  <el-table-column prop="endTime" label="结束时间" width="160"></el-table-column>
                  <el-table-column prop="status" label="预约状态" width="160"></el-table-column>
                  <el-table-column class="check_more" label="操作" width="160">
                    <template slot-scope="scope">
                      <span style="color:#869df8" @click="viewdetails3(scope.row)">查看详情</span>
                    </template>
                  </el-table-column>
                </el-table>
                <div v-if="tuanduitable.length">
                  <div class="no_more" v-show="tuandui_more">
                    <p @click="lan3(page3)" v-if="tuanduitable.length">无更多数据</p>
                  </div>
                </div>
              </div>
              <div v-show="!show3">
                <div class="zixundetail">
                  <p class="zixundetail_top">
                    <span>详情</span>
                    <span>
                      状态:
                      <span>{{tuandui_status}}</span>
                    </span>
                  </p>
                  <div>
                    <ul class="table_title">
                      <li>
                        <span>预约编号</span>
                        <span>姓名</span>
                        <span>证件类型</span>
                        <span>证件编号</span>
                        <span>预约时间</span>
                        <span>参观时间</span>
                        <span>团队名称</span>
                      </li>
                    </ul>
                    <ul class="table_content">
                      <li>
                        <p>{{tuandui_number}}</p>
                        <p>{{userName}}</p>
                        <p>身份证</p>
                        <p>{{sfz}}</p>
                        <p>{{tuandui_createTime}}</p>
                        <p>{{tuandui_date}}</p>
                        <p>{{tuandui_teamName}}</p>
                      </li>
                    </ul>
                  </div>
                </div>
                <div class="btn">
                  <p class="back" @click="tuandui_fanhui()">返回</p>
                  <p class="return" v-if="tuandui_status=='成功'" @click="tuandui_back()">撤销</p>
                  <p class="already_return" v-if="tuandui_status=='过期'">已过期</p>
                  <p class="already_return" v-if="tuandui_status=='撤销'">已撤销</p>
                </div>
              </div>
            </div>
            <!-- 活动预约 -->
            <div v-show="i==4" id="huodongyuyue">
              <div v-show="show4">
                <el-table :data="hdyuyuetable">
                  <el-table-column prop="number" label="预约编号" width="180"></el-table-column>
                  <el-table-column prop="createTime" label="预约时间" width="180"></el-table-column>
                  <el-table-column prop="cangn" label="参观时间" width="160"></el-table-column>
                  <el-table-column prop="name" label="活动名称" width="160"></el-table-column>
                  <el-table-column prop="status" label="预约状态" width="160"></el-table-column>
                  <el-table-column class="check_more" label="操作" width="160">
                    <template slot-scope="scope">
                      <span style="color:#869df8" @click="viewdetails4(scope.row)">查看详情</span>
                    </template>
                  </el-table-column>
                </el-table>
                <div v-if="hdyuyuetable.length">
                  <div class="no_more" v-show="hd_more" @click="lan4(page4)">
                    <p>无更多数据</p>
                  </div>
                </div>
              </div>
              <div v-show="!show4">
                <div class="zixundetail">
                  <p class="zixundetail_top">
                    <span>详情</span>
                    <span>
                      状态:
                      <span>{{hd_status}}</span>
                    </span>
                  </p>
                  <div>
                    <ul class="table_title">
                      <li>
                        <span>预约编号</span>
                        <span>姓名</span>
                        <span>证件类型</span>
                        <span>证件编号</span>
                        <span>预约时间</span>
                        <span>参观时间</span>
                        <span>门票名称</span>
                      </li>
                    </ul>
                    <ul class="table_content">
                      <li>
                        <p>{{hd_number}}</p>
                        <p>{{userName}}</p>
                        <p>身份证</p>
                        <p>{{sfz}}</p>
                        <p>{{hd_yuyuetime}}</p>
                        <p>201564</p>
                        <p>{{hd_name}}</p>
                      </li>
                    </ul>
                  </div>
                </div>
                <div class="btn">
                  <p class="back" @click="hd_fanhui()">返回</p>
                  <p class="return" v-if="hd_status=='成功'" @click="hd_back()">撤销</p>
                  <p class="already_return" v-if="hd_status=='过期'">已过期</p>
                  <p class="already_return" v-if="hd_status=='撤销'">已撤销</p>
                  <p class="already_return" v-if="hd_status=='已签到'">撤销</p>
                </div>
              </div>
            </div>
            <!-- 讲座预约 -->
            <div v-show="i==5" id="jiangzuo">
              <div v-show="show5">
                <el-table :data="jiangzuotable">
                  <el-table-column prop="number" label="预约编号" width="180"></el-table-column>
                  <el-table-column prop="createTime" label="预约时间" width="180"></el-table-column>
                  <el-table-column prop="cangn" label="参观时间" width="160"></el-table-column>
                  <el-table-column prop="name" label="讲座名称" width="160"></el-table-column>
                  <el-table-column prop="status" label="预约状态" width="160"></el-table-column>
                  <el-table-column class="check_more" label="操作" width="160">
                    <template slot-scope="scope">
                      <span style="color:#869df8" @click="viewdetails5(scope.row)">查看详情</span>
                    </template>
                  </el-table-column>
                </el-table>
                <div v-if="jiangzuotable.length">
                  <div class="no_more" v-show="jz_more" @click="lan5(page5)">
                    <p>无更多数据</p>
                  </div>
                </div>
              </div>
              <div v-show="!show5">
                <div class="zixundetail">
                  <p class="zixundetail_top">
                    <span>详情</span>
                    <span>
                      状态:
                      <span>{{jiangzuo_status}}</span>
                    </span>
                  </p>
                  <div>
                    <ul class="table_title">
                      <li>
                        <span>预约编号</span>
                        <span>姓名</span>
                        <span>证件类型</span>
                        <span>证件编号</span>
                        <span>预约时间</span>
                        <span>参观时间</span>
                        <span>门票名称</span>
                      </li>
                    </ul>
                    <ul class="table_content">
                      <li>
                        <p>{{jiangzuo_number}}</p>
                        <p>{{userName}}</p>
                        <p>身份证</p>
                        <p>{{sfz}}</p>
                        <p>{{jiangzuo_yuyuetime}}</p>
                        <p>201564</p>
                        <p>{{jiangzuo_name}}</p>
                      </li>
                    </ul>
                  </div>
                </div>
                <div class="btn">
                  <p class="back" @click="jiangzuo_fanhui()">返回</p>
                  <p class="return" v-if="jiangzuo_status=='成功'" @click="jiangzuo_back()">撤销</p>
                  <p class="already_return" v-if="jiangzuo_status=='过期'">已过期</p>
                  <p class="already_return" v-if="jiangzuo_status=='撤销'">已撤销</p>
                </div>
              </div>
            </div>
            <!-- 咨询建议 -->
            <div v-show="i==6" id="zixun">
              <div v-show="show6">
                <el-table :data="zixuntable">
                  <el-table-column label="编号" width="250" prop="id">
                    <!-- <template slot-scope="scope">{{scope.$index+1}}</template> -->
                  </el-table-column>

                  <el-table-column prop="title" label="标题" width="250"></el-table-column>
                  <el-table-column prop="status" label="状态" width="230"></el-table-column>

                  <el-table-column class="check_more" label="操作" width="230">
                    <template slot-scope="scope">
                      <span style="color:#869df8" @click="viewdetails6(scope.row)">查看详情</span>
                    </template>
                  </el-table-column>
                </el-table>
                <div v-if="zixuntable.length">
                  <div class="no_more" v-show="zx_more">
                    <p @click="lan(page6)">加载更多数据</p>
                  </div>
                </div>
              </div>
              <div v-show="!show6" class="zixundetail">
                <p class="zixundetail_top">
                  <span>详情</span>
                  <span>
                    状态:
                    <span>{{zx_status}}</span>
                  </span>
                </p>
                <div class="zixundetail_center">
                  <p>
                    <span>发布时间:</span> &nbsp;&nbsp;
                    <span>{{zx_createTime}}</span>
                  </p>
                  <p>
                    <span>发布内容:</span> &nbsp;&nbsp;
                    <span>{{zx_content}}</span>
                  </p>
                </div>
                <div class="zixundetail_answer">
                  <p>
                    <span>回复内容:</span> &nbsp;&nbsp;
                    <span>{{zx_answer}}</span>
                  </p>
                </div>
              </div>
            </div>
            <!-- 征集 -->
            <div v-show="i==7" id="zhengji">
              <div v-show="show7">
                <el-table :data="zhengjitable">
                  <el-table-column label="编号" width="250" prop="id">
                    <!-- <template slot-scope="scope">{{scope.$index+1}}</template> -->
                  </el-table-column>
                  <el-table-column prop="title" label="文物名称" width="250"></el-table-column>
                  <el-table-column prop="status" label="征集状态" width="250"></el-table-column>

                  <el-table-column class="check_more" label="操作" width="250">
                    <template slot-scope="scope">
                      <span style="color:#869df8" @click="viewdetails7(scope.row)">查看详情</span>
                    </template>
                  </el-table-column>
                </el-table>
                <div v-if="zhengjitable.length">
                  <div class="no_more" v-show="zj_more">
                    <p @click="lan7(page7)">加载更多数据</p>
                  </div>
                </div>
              </div>
              <div v-show="!show7" class="zixundetail">
                <p class="zixundetail_top">
                  <span>详情</span>
                  <span>
                    状态:
                    <span>{{zj_status}}</span>
                  </span>
                </p>
                <div class="zixundetail_center">
                  <p>
                    发布时间&nbsp;:&nbsp;
                    <span>{{ zj_createTime}}</span>
                  </p>
                  <p>
                    文物名称&nbsp;:&nbsp;
                    <span>{{ zj_title}}</span>
                  </p>
                  <p>
                    发布内容&nbsp;:&nbsp;
                    <span>{{ zj_content}}</span>
                  </p>
                </div>
                <div class="zixundetail_answer">
                  <p>
                    回复内容&nbsp;:&nbsp;
                    <span>{{ zj_answer}}</span>
                  </p>
                </div>
              </div>
            </div>
            <!-- 志愿者报名 -->
            <div v-show="i==8" id="zhiyuanzhe">
              <div v-show="show8">
                <el-table :data="zhiyuanzhetable">
                  <el-table-column prop="id" label="预约编号" width="200"></el-table-column>】
                  <el-table-column prop="place" label="地点" width="200"></el-table-column>
                  <el-table-column prop="creatTime" label="预约时间" width="200"></el-table-column>
                  <el-table-column prop="zhuangtai" label="到场时间" width="200"></el-table-column>
                  <el-table-column class="check_more" label="详情" width="220">
                    <template slot-scope="scope">
                      <span style="color:#869df8" @click="viewdetails8(scope.row)">查看详情</span>
                    </template>
                  </el-table-column>
                </el-table>
                <div v-if="zhiyuanzhetable.length">
                  <div class="no_more" v-show="zyz_more">
                    <p @click="lan8(page8)">加载更多数据</p>
                  </div>
                </div>
              </div>
              <div v-show="!show8">
                <div class="zixundetail">
                  <p class="zixundetail_top">
                    <span>详情</span>
                    <span>
                      状态:
                      <span>预约成功</span>
                    </span>
                  </p>
                  <div>
                    <ul class="table_title">
                      <li class="zhiyuanzhebaom">
                        <span>预约编号</span>
                        <span>姓名</span>
                        <span>地点</span>

                        <span>预约时间</span>

                        <span>到场时间</span>
                      </li>
                    </ul>
                    <ul class="table_content">
                      <li class="zhiyuanzhebaom">
                        <span>{{zyz_bianhao}}</span>
                        <span>{{userName}}</span>

                        <span>{{zyz_place}}</span>
                        <span>{{zyz_creatTime}}</span>
                        <span></span>
                      </li>
                    </ul>
                  </div>
                </div>
                <div class="btn">
                  <!-- <p class="back">返回</p> -->
                  <!-- <p class="return">取消</p> -->
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { JudgeLogin } from "../../api/login";
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      gr_number: "", //个人
      gr_date: "", //参观时间
      gr_id: "", //个人列表的id
      gr_status: "", //个人预约的状态
      tuandui_number: "", //团队预约编号
      tuandui_date: "", //参观时间
      tuandui_id: "", //团队列表的id
      tuandui_status: "", //团队预约的状态
      tuandui_createTime: "",
      tuandui_teamName: "", //团队名称
      hd_number: "", //活动详情
      hd_name: "",
      hd_id: "",
      hd_status: "",
      hd_yuyuetime: "",
      jiangzuo_number: "", //讲座详情
      jiangzuo_name: "",
      jiangzuo_id: "",
      jiangzuo_status: "",
      jiangzuo_yuyuetime: "",
      zx_createTime: "", //咨询详情
      zx_content: "",
      zx_answer: "",
      zx_status: "",
      zx_index: "",
      zj_createTime: "", //征集
      zj_answer: "",
      zj_content: "",
      zj_index: "",
      zj_title: "",
      zj_status: "",
      zyz_bianhao: "", //志愿者
      zyz_place: "",
      zyz_creatTime: "",
      zx_more: true, //咨询加载更多
      gr_more: true, //咨询加载更多
      tuandui_more: true, //咨询加载更多
      hd_more: true, //咨询加载更多
      jz_more: true, //咨询加载更多
      zj_more: true, //咨询加载更多
      zyz_more: true, //咨询加载更多
      show2: true, //geren
      show3: true, //团队
      show4: true, //huod
      show5: true, //jianzg
      show6: true, //zixun
      show7: true, //zhengji
      show8: true,
      will_return: true, //退票的按钮显示
      newUpwd2: "",
      newUpwd: "",
      upwd: "",
      sfz: "",
      mail: "",
      jifen: 0, //积分
      userName: "", //用户名
      nav: [
        { name: "基本资料" },
        { name: "密码修改" },
        { name: "个人预约" },
        { name: "团队预约" },
        { name: "活动预约" },
        { name: "讲座预约" },
        { name: "咨询建议" },
        { name: "征集" },
        { name: "志愿者报名" },
      ],
      i: "",
      page2: 1, // geren
      pageSize2: 5,
      totalPage2: 0,
      page3: 1, // tuandui
      pageSize3: 5,
      totalPage3: 0,
      page4: 1, // 活动
      pageSize4: 5,
      totalPage4: 0,
      page5: 1, // jiangzuo
      pageSize5: 5,
      totalPage5: 0,
      page6: 1, // 页码
      pageSize6: 5, // zixun
      totalPage6: 0,
      page7: 1, // 页码
      pageSize7: 5, // zhengji
      totalPage7: 0,
      page8: 1, // 页码
      totalPage8: 0,
      pageSize8: 5, // zYZ

      gerentable: [],
      tuanduitable: [],
      zhengjitable: [],
      zixuntable: [],
      hdyuyuetable: [],
      jiangzuotable: [],
      zhiyuanzhetable: [],
    };
  },
  created() {
    this.zixun();
    this.zhengji();
    this.geren();
    this.tuandui();
    this.hdyuyue();
    this.jiangzuo();
    this.receive_score();
    this.zhiyuanzhe();
  },
  mounted() {},
  methods: {
    ...mapActions(["isShow"]),
    save() {
      let sfz = this.sfz;
      let mail = this.mail;
      let userName = this.userName;
      let sfz_num = /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
      let mail_num = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
      if (!sfz || !mail || !userName) {
        this.$message({
          message: "内容不能为空",
          type: "error",
          duration: 1000,
          offset: 320,
        });
        return;
      }
      if (!sfz_num.test(sfz)) {
        this.$message({
          message: "身份证格式有误,请重新输入",
          type: "error",
          duration: 1000,
          offset: 320,
        });
        return;
      }
      if (!mail_num.test(mail)) {
        this.$message({
          message: "邮箱格式有误,请重新输入",
          type: "error",
          duration: 1000,
          offset: 320,
        });
        return;
      }

      this.$api
        .post(
          `${this.zs}/live/update/cert/mobile?idttNo=${sfz}&email=${mail}&name=${userName}`
        )
        .then((res) => {
          console.log(res);
          if (res.data.success == true) {
            this.$message({
              message: "保存成功",
              type: "success",
              duration: 1000,
              offset: 320,
            });
          } else {
            this.$message({
              message: res.data.msgDetail,
              type: "error",
              duration: 1000,
              offset: 320,
            });
          }
        });
    },
    // 点击切换导航
    change(index) {
      this.i = index;

      JudgeLogin(this);
      (this.show2 = true),
        (this.show3 = true), //团队
        (this.show4 = true), //huod
        (this.show5 = true), //jianzg
        (this.show6 = true), //zixun
        (this.show7 = true); //zhengji
      this.show8 = true;
    },
    //个人详情页===========================详情页
    viewdetails2(row) {
      // console.log(row);
      this.gr_number = row.number;
      this.gr_date = row.date;
      this.gr_status = row.status;
      this.gr_id = row.id; //当前列表页对应的id
      this.show2 = false;
    },
    viewdetails3(row) {
      // console.log(row);
      this.tuandui_number = row.number;
      this.tuandui_date = row.date;
      this.tuandui_status = row.status;
      this.tuandui_id = row.id; //当前列表页对应的id
      this.tuandui_createTime = row.createTime;
      this.tuandui_teamName = row.teamName;
      this.show3 = false;
    },
    //活动详情页
    viewdetails4(row) {
      // console.log(row);
      this.hd_number = row.number;
      this.hd_status = row.status;
      this.hd_name = row.name;

      this.hd_yuyuetime = row.createTime;
      // this.hd_cgtime=;
      this.hd_id = row.id;
      this.show4 = false;
      //此接口用来判断是否签到成功 签到成功按钮变灰色
      this.$api
        .get(`${this.zs}/huodong/yugao/me/item?id=${this.hd_id}`)
        .then((res) => {
          // console.log(res, "hdjf");

          if (res.data.data.signStatus == 2) {
            this.hd_status = "已签到";
          }
        });
    },
    //讲座详情页
    viewdetails5(row) {
      // console.log(row);
      this.jiangzuo_number = row.number;
      this.jiangzuo_status = row.status;
      this.jiangzuo_name = row.name;
      this.jiangzuo_id = row.id;
      // this.hd_zj=;
      this.jiangzuo_yuyuetime = row.createTime;
      // this.hd_cgtime=;
      this.$api
        .get(`${this.zs}/wenbo/jiangzuo/me/item?id=${this.jiangzuo_id}`)
        .then((res) => {
          console.log(res, "jzjf");

          if (res.data.data.signStatus == 2) {
            this.jiangzuo_status = "已签到";
          }
        });
      this.show5 = false;
    },
    viewdetails6(row) {
      // console.log(row, "zx2");
      this.show6 = false;
      this.zx_createTime = row.createTime;
      this.zx_status = row.status;
      this.zx_content = row.content;
      this.zx_answer = row.answer;
    },
    //zhengji
    viewdetails7(row) {
      // console.log(row, "zj");
      this.show7 = false;

      this.zj_createTime = row.createTime;
      this.zj_content = row.content;
      this.zj_answer = row.answer;
      this.zj_status = row.status;
      this.zj_title = row.title;
    },
    //zhiyuanzhezhijia
    viewdetails8(row) {
      this.show8 = false;
      // console.log(row);

      this.zyz_bianhao = row.id;
      this.zyz_place = row.place;
      this.zyz_creatTime = row.creatTime;
    },
    //===============================//个人退票
    //个人退票
    gr_back() {
      this.$api
        .get(`${this.zs}/geren/yuyue/update?id=${this.gr_id}`)
        .then((res) => {
          // console.log(res, "back_gr");
          if (res.data.success == true) {
            this.gr_status = "撤销";
            this.$message({
              message: "退票成功",
              type: "success",
              duration: 1000,
              offset: 320,
            });
            this.receive_score();
            if (this.gerentable.length == 0) return;
            this.gerentable.find((item) => item.id == this.gr_id).status =
              "撤销";
            //等效
            // this.gerentable.forEach(item=>{
            //   if(item.id==this.gr_id){
            //     item.status="撤销"
            //   }
            // })
          } else {
            this.$message({
              message: res.data.msgDetail,
              type: "error",
              duration: 1000,
              offset: 320,
            });
          }
        });
    },
    gr_fanhui() {
      this.show2 = true;
    },
    //tuandui
    tuandui_back() {
      this.$api
        .get(`${this.zs}/tuandui/yuyue/update?id=${this.tuandui_id}`)
        .then((res) => {
          console.log(res, "back_tuandui");
          if (res.data.success == true) {
            this.tuandui_status = "撤销";
            this.$message({
              message: "退票成功",
              type: "success",
              duration: 1000,
              offset: 320,
            });
            this.receive_score();
            if (this.tuanduitable.length == 0) return;
            this.tuanduitable.find(
              (item) => item.id == this.tuandui_id
            ).status = "撤销";
            //等效
            // this.gerentable.forEach(item=>{
            //   if(item.id==this.gr_id){
            //     item.status="撤销"
            //   }
            // })
          } else {
            this.$message({
              message: res.data.msgDetail,
              type: "error",
              duration: 1000,
              offset: 320,
            });
          }
        });
    },

    tuandui_fanhui() {
      this.show3 = true;
    },
    //活动退票
    hd_back() {
      this.$api
        .get(`${this.zs}/huodong/yugao/update?orderId=${this.hd_id}`)
        .then((res) => {
          // console.log(res, "back_hd");
          if (res.data.success == true) {
            this.hd_status = "撤销";
            this.$message({
              message: "退票成功",
              type: "success",
              duration: 1000,
              offset: 320,
            });
            this.receive_score();
            //此处处理活动预约的数据源
            if (this.hdyuyuetable.length == 0) return;
            this.hdyuyuetable.find((item) => item.id == this.hd_id).status =
              "撤销";
          } else {
            this.$message({
              message: res.data.msgDetail,
              type: "error",
              duration: 1000,
              offset: 320,
            });
          }
        });
    },
    hd_fanhui() {
      this.show4 = true;
    },
    //讲座退票
    jiangzuo_back() {
      this.$api
        .get(`${this.zs}/wenbo/jiangzuo/update?orderId=${this.jiangzuo_id}`)
        .then((res) => {
          // console.log(res, "back_hd");
          if (res.data.success == true) {
            this.jiangzuo_status = "撤销";
            this.$message({
              message: "退票成功",
              type: "success",
              duration: 1000,
              offset: 320,
            });
            this.receive_score();
            if (this.jiangzuotable.length == 0) return;
            this.jiangzuotable.find(
              (item) => item.id == this.jiangzuo_id
            ).status = "撤销";
          } else {
            // this.jiangzuo_status = "过期";
            // this.jiangzuotable.find(
            //   item => item.id == this.jiangzuo_id
            // ).status = "过期";
            this.$message({
              message: res.data.msgDetail,
              type: "error",
              duration: 1000,
              offset: 320,
            });
          }
        });
    },
    jiangzuo_fanhui() {
      this.show5 = true;
    },
    //jifen
    receive_score() {
      this.$api.get(this.zs + "/live/user/info").then((res) => {
        this.userName = res.data.data.name;
        this.mail = res.data.data.email;
        this.jifen = res.data.data.jiFen;
        this.sfz = res.data.data.idttNo;
        // console.log(res, "sfz");
      });
    },
    //签到
    qiandao() {
      this.$api.post(this.zs + "/live/user/sign/in").then((res) => {
        // console.log(res);
        if (res.data.code == "OK") {
          this.receive_score();
        } else {
          this.$message({
            message: res.data.msgDetail,
            type: "error",
            duration: 1000,
            offset: 320,
          });
        }
      });
    },
    //修改密码---
    mima() {
      this.$api
        .get(
          `${this.zs}/live/update/pwd/mobile?oldpwd=${this.upwd}&newpwd=${this.newUpwd}`
        )
        .then((res) => {
          if (!this.upwd || !this.newUpwd || !this.newUpwd2) {
            this.$message({
              message: "内容不能为空",
              type: "error",
              duration: 1000,
              offset: 320,
            });
            return;
          }
          let mima = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;
          if (!mima.test(this.newUpwd)) {
            this.$message({
              message: "长度8~6,必须包含数字字母",
              type: "error",
              duration: 1000,
              offset: 320,
            });
            return;
          }
          if (this.newUpwd != this.newUpwd2) {
            this.$message({
              message: "两次密码不一致",
              type: "error",
              duration: 1000,
              offset: 320,
            });
            return;
          }
          if (res.data.success == true) {
            this.upwd = "";
            this.newUpwd = "";
            this.newUpwd2 = "";
            this.$store.commit("setIsLogin", false);
            this.$message({
              message: "密码修改成功",
              type: "success",
              duration: 1000,
              offset: 320,
            });

            this.isShow();
            this.$router
              .push({
                path: "/",
              })
              .catch((err) => {
                err;
              });
          } else {
            this.$message({
              message: res.data.msgDetail,
              type: "error",
              duration: 1000,
              offset: 320,
            });
            this.upwd = "";
          }
        });
    },
    //2===========================个人预约列表页
    geren() {
      this.$api
        .post(
          `${this.zs}/geren/yuyue/page?pageNumber=${this.page2}&pageSize=${this.pageSize2}`
        )
        .then((res) => {
          let self = this;
          // console.log(res, "gr");
          let data = res.data.data.list;
          this.totalPage2 = res.data.data.totalPage;
          if (!res.data.data.list) return;

          data.forEach((item) => {
            if (item.status == 2) {
              item.status = "成功";
              self.gr_status = "成功";
            } else if (item.status == 4) {
              item.status = "失败";
              self.gr_status = "失败";
            } else if (item.status == 6) {
              item.status = "过期";
              self.gr_status = "过期";
            } else if (item.status == 8) {
              item.status = "撤销";
              self.gr_status = "撤销";
            }
          });
          this.gerentable = [...this.gerentable, ...data];
        });
    },
    lan2(i) {
      //页码点击事件
      this.page2 += 1;
      if (this.page2 >= this.totalPage2) {
        this.geren();
        this.gr_more = false;
      } else {
        this.geren();
      }
    },
    //团队预约列表页渲染
    tuandui() {
      this.$api
        .post(
          `${this.zs}/tuandui/yuyue/me/page?pageNumber=${this.page3}&pageSize=${this.pageSize3}`
        )
        .then((res) => {
          let self = this;

          let data = res.data.data.list;
          this.totalPage3 = res.data.data.totalPage;
          // this.gr_id =
          //   res.data.data.list.length > 0 ? res.data.data.list[0].id : "";
          if (!res.data.data.list) return;
          data.forEach((item) => {
            if (item.status == 2) {
              item.status = "成功";
              self.tuandui_status = "成功";
            } else if (item.status == 4) {
              item.status = "失败";
              self.tuandui_status = "失败";
            } else if (item.status == 6) {
              item.status = "过期";
              self.tuandui_status = "过期";
            } else if (item.status == 8) {
              item.status = "撤销";
              self.tuandui_status = "撤销";
            }
          });
          this.tuanduitable = [...this.tuanduitable, ...data];
        });
    },
    lan3(i) {
      //页码点击事件
      this.page3 += 1;
      if (this.page3 >= this.totalPage3) {
        this.tuandui();
        this.tuandui_more = false;
      } else {
        this.tuandui();
      }
    },
    //HD预约列表页4
    hdyuyue() {
      this.$api
        .post(
          `${this.zs}/huodong/yugao/me/page?pageNumber=${this.page4}&pageSize=${this.pageSize4}`
        )
        .then((res) => {
          // console.log(res, "hd");
          let self = this;
          let data = res.data.data.list;
          this.totalPage4 = res.data.data.totalPage;
          // this.hd_id =
          //   res.data.data.list.length > 0 ? res.data.data.list[0].id : "";
          if (!res.data.data.list) return;
          data.forEach((item) => {
            if (item.status == 2) {
              item.status = "成功";
              self.hd_status = "成功";
            } else if (item.status == 4) {
              item.status = "失败";
              self.hd_status = "失败";
            } else if (item.status == 6) {
              item.status = "过期";
              self.hd_status = "过期";
            } else if (item.status == 8) {
              item.status = "撤销";
              self.hd_status = "撤销";
            }
          });
          this.hdyuyuetable = [...this.hdyuyuetable, ...data];
        });
    },
    lan4(i) {
      //页码点击事件
      this.page4 += 1;
      if (this.page4 >= this.totalPage4) {
        this.hdyuyue();
        this.hd_more = false;
      } else {
        this.hdyuyue();
      }
    },
    //讲座列表页5
    jiangzuo() {
      this.$api
        .post(
          `${this.zs}/wenbo/jiangzuo/me/page?pageNumber=${this.page5}&pageSize=${this.pageSize5}`
        )
        .then((res) => {
          // console.log(res, "jiangzuo");
          let data = res.data.data.list;
          this.totalPage5 = res.data.data.totalPage;
          if (!res.data.data.list) return;
          data.forEach((item) => {
            if (item.status == 2) {
              item.status = "成功";
            } else if (item.status == 4) {
              item.status = "失败";
            } else if (item.status == 6) {
              item.status = "过期";
            } else if (item.status == 8) {
              item.status = "撤销";
            }
          });
          this.jiangzuotable = [...this.jiangzuotable, ...data];
        });
    },
    lan5(i) {
      //页码点击事件
      this.page5 += 1;
      if (this.page5 >= this.totalPage5) {
        this.jiangzuo();
        this.jz_more = false;
      } else {
        this.jiangzuo();
      }
    },

    //咨询列表页6
    zixun() {
      this.$api
        .post(
          `${this.zs}/zixun/me/page?pageNumber=${this.page6}&pageSize=${this.pageSize6}`
        )
        .then((res) => {
          // console.log(res, "zx");
          this.totalPage6 = res.data.data.totalPage;
          let data = res.data.data.list;
          if (!res.data.data.list) return;
          data.forEach((item) => {
            if (item.answer == "暂未回复") {
              item.status = "暂未回复";
            } else {
              item.status = "已回复";
            }
          });
          this.zixuntable = [...this.zixuntable, ...data];
        });
    },
    lan(i) {
      //页码点击事件
      this.page6 += 1;
      if (this.page6 >= this.totalPage6) {
        this.zixun();
        this.zx_more = false;
      } else {
        this.zixun();
      }
    },
    //获取咨询编号 按顺序排列
    indexMethod(index) {
      //    return index + 1;
      this.zj_index = index + 1;
      // console.log(this.zj_index, "zb");
    },
    //征集列表页7
    zhengji() {
      this.$api
        .post(
          `${this.zs}/zhengji/me/page?pageNumber=${this.page7}&pageSize=${this.pageSize7}`
        )
        .then((res) => {
          // console.log(res, "zj");
          let data = res.data.data.list;

          this.totalPage7 = res.data.data.totalPage;
          if (!res.data.data.list) return;
          data.forEach((item) => {
            if (item.answer == "暂未回复") {
              item.status = "暂未回复";
            } else {
              item.status = "已回复";
            }
          });
          this.zhengjitable = [...this.zhengjitable, ...data];
        });
    },
    lan7(i) {
      //页码点击事件
      this.page7 += 1;
      if (this.page7 >= this.totalPage7) {
        this.zhengji();
        this.zj_more = false;
      } else {
        this.zhengji();
      }
    },
    //志愿者列表页8
    zhiyuanzhe() {
      this.$api
        .post(
          `${this.zs}/volunteer/apply/me/page?pageNumber=${this.page8}&pageSize=${this.pageSize8}`
        )
        .then((res) => {
          // console.log(res, "zYZ");
          this.totalPage8 = res.data.data.totalPage;
          let data = res.data.data.list;
          if (!res.data.data.list) return;
          res.data.data.list.forEach((item) => {
            this.$set(item, "place", "舟山博物馆");
          });
          this.zhiyuanzhetable = [...this.zhiyuanzhetable, ...data];
        });
    },
    lan8(i) {
      //页码点击事件
      this.page8 += 1;
      if (this.page8 >= this.totalPage8) {
        this.zhiyuanzhe();
        this.zyz_more = false;
      } else {
        this.zhiyuanzhe();
      }
    },
  },
};
</script>
<style scoped>
li,
ul,
p {
  padding: 0px;
  margin: 0px;
}
li {
  list-style: none;
}
.gray {
  background-color: #f0f0f0;

  width: 100%;

  box-sizing: border-box;
  padding: 50px 96px 120px;
}
.white {
  background-color: white;
  padding-bottom: 105px;
  min-width: 1200px;
}
.vip_k {
  width: 1225px;

  /* border:1px solid red; */
  padding-top: 64px;
  margin: auto;
}
.top {
  display: flex;
  border-bottom: 2px solid blue;
  margin-bottom: 40px;
  padding-bottom: 20px;
}
.name {
  font-size: 24px;

  margin-right: 30px;
}
.white_vip {
  font-size: 24px;

  display: flex;
  position: relative;
}
.add {
  background: url("../../assets/image/vip/add.png") no-repeat right top;
  padding-right: 25px;
}
.baiyin {
  margin-right: 40px;
}
.qiandao {
  width: 128px;
  height: 32px;
  background: blue;
  color: white;
  font-size: 16px;
  text-align: center;
  border-radius: 3px;
  line-height: 32px;

  margin-left: 40px;
}
.nav {
  width: 150px;
  margin-right: 50px;
  font-size: 18px;
  justify-content: space-between;
  background: #eaeaea;
  border-bottom: 3px solid #eaeaea;
  margin-bottom: 52px;
}
.nav li {
  padding: 20px 7px;
  text-align: center;
  cursor: pointer;
}
.choose {
  background: white;
}
/* 基本资料 */
.buju {
  display: flex;
}
.jibenziliao {
  width: 700px;
  margin: auto;
  padding-top: 30px;
  margin-bottom: 50px;
}
.jibenziliao input {
  width: 280px;
  height: 40px;
}
.jibenziliao .one {
  display: flex;
  justify-content: space-between;
  margin-bottom: 50px;
}
.jibenziliao .two {
  display: flex;
  justify-content: space-between;
}
.jibenziliao_xiugai {
  text-align: center;
  background: darkblue;
  width: 200px;
  height: 30px;
  border-radius: 3px;
  color: white;
  line-height: 30px;
  cursor: pointer;
  margin: auto;
}
/* 修改密码 */
.xiugai {
  width: 546px;
  margin: auto;
}
.xiugai label {
  color: #333333;
  margin-right: 12px;
  font-weight: bold;
}
.xiugai input {
  height: 36px;
  width: 407px;
  margin-bottom: 40px;
}
.xiugai_button {
  width: 395px;
  height: 44px;
  cursor: pointer;
  color: white;
  background: #2673f5;
  border-radius: 15px;
  text-align: center;
  line-height: 44px;
  margin-top: 20px;
}
/* 志愿者报名 */

#zhiyuanzhe >>> .el-table .cell,
#jiangzuo >>> .el-table .cell,
#zhengji >>> .el-table .cell,
#zixun >>> .el-table .cell,
#gerenyuyue >>> .el-table .cell,
#tuanduiyuyue >>> .el-table .cell,
#huodongyuyue >>> .el-table .cell {
  color: #323232;
  font-size: 16px;
  font-family: light;
  text-align: center;
}

#jiangzuo >>> .el-table,
#zhengji >>> .el-table,
#zixun >>> .el-table,
#gerenyuyue >>> .el-table,
#tuanduiyuyue >>> .el-table,
#huodongyuyue >>> .el-table {
  max-width: 1200px;
  margin-bottom: 85px;
}
#zhiyuanzhe >>> .el-table th,
#jiangzuo >>> .el-table th,
#zhengji >>> .el-table th,
#zixun >>> .el-table th,
#gerenyuyue >>> .el-table th,
#tuanduiyuyue >>> .el-table th,
#huodongyuyue >>> .el-table th {
  background-color: #f2f4fb;
  border-bottom: 2px solid #103460;
  height: 64px;
}
#zhiyuanzhe >>> .el-table td,
#jiangzuo >>> .el-table td,
#zhengji >>> .el-table td,
#zixun >>> .el-table td,
#tuanduiyuyue >>> .el-table td,
#gerenyuyue >>> .el-table td,
#huodongyuyue >>> .el-table td {
  border-bottom: 2px solid #103460;
}
#zhiyuanzhe >>> .no_more,
#jiangzuo >>> .no_more,
#zhengji >>> .no_more,
#zixun >>> .no_more,
#tuanduiyuyue >>> .no_more,
#gerenyuyue >>> .no_more,
#huodongyuyue >>> .no_more {
  color: 18px;
  margin: 34px auto;
  width: 320px;
  height: 56px;
  border: 1px solid #323232;
  line-height: 56px;
  text-align: center;
  font-size: 18px;
  color: #666666;
}

#zhiyuanzhe >>> .el-table--enable-row-transition .el-table__body td,
#jiangzuo >>> .el-table--enable-row-transition .el-table__body td,
#zhengji >>> .el-table--enable-row-transition .el-table__body td,
#zixun >>> .el-table--enable-row-transition .el-table__body td {
  color: #869df8;
}
/* 咨询的详情页 */
.zixundetail {
  background: #f2f4fa;
  padding: 24px 30px 40px;
  width: 900px;
}
.zixundetail_top {
  font-size: 24px;

  display: flex;
  justify-content: space-between;
  margin-bottom: 50px;
}
.zixundetail_center {
  font-size: 18px;
  font-family: light;
  margin-left: 24px;
  margin-bottom: 70px;
  line-height: 2;
}
.zixundetail_answer {
  font-size: 18px;
  margin-left: 24px;
  line-height: 2;
}
/* 个人 */
.table_title,
.table_content {
  box-sizing: border-box;

  text-align: center;
}
.table_content {
  margin-top: 20px;
}
.table_title {
  padding-bottom: 5px;
  border-bottom: 1px solid gray;
}
.table_title li span {
  width: 120px;
  display: inline-block;
}
.table_content li {
  display: flex;
}
.table_content li p {
  width: 140px;
}
.table_content .zhiyuanzhebaom span,
.table_title .zhiyuanzhebaom span {
  width: 176px;
}
.table_content li {
  margin-bottom: 15px;
}
.quxiao {
  margin-top: 30px;
  display: flex;
  justify-content: flex-end;
  color: #666666;
}
.btn {
  display: flex;
  justify-content: space-evenly;
  margin-top: 40px;
}
.back,
.return,
.already_return {
  width: 255px;
  height: 43px;
  border-radius: 30px;

  text-align: center;
  line-height: 40px;
}
.back {
  border: 1px solid #103460;

  color: #666666;
}
.return {
  background: #ff0000;

  color: white;
}
.already_return {
  background: #d6b8b8;
  color: white;
}
</style>